<template>
  <div>
    <!--注意：template里面只能有一个div根标签 -->

    <h1>请登录</h1>
    <!-- 下面的home-header之所以能自动关联HomeHeader，是框架在后台发挥作用 -->
    <!-- <home-header></home-header> -->
    <br /><br /><br /><br />
    <el-col :span='8' :offset='8'>
      <el-card shadow='always'>
        <!-- <h1 class='home'>请登录</h1> -->
        <el-divider></el-divider><!-- 这是一条华丽的分割线 -->
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="userId">
            <el-input v-model="ruleForm.userId" autocomplete="off" placeholder="请输入您的姓名小写全拼"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" placeholder="默认密码为123456">
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" round @click="submitForm('ruleForm')">登录</el-button>
            <el-button type="info" round @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span='16' :offset='4'>
      <div>
        <el-divider></el-divider>抵制不良游戏，拒绝盗版游戏。 注意自我保护，谨防受骗上当。 适度游戏益脑，沉迷游戏伤身。 合理安排时间，享受健康生活。
      </div>
    </el-col>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    var validateUserId = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        userId: '',
        checkPass: ''
      },
      rules: {
        // blur代表失去焦点以后进行校验
        userId: [{ validator: validateUserId, trigger: 'blur' }],
        checkPass: [{ validator: validatePass, trigger: 'blur' }]
        // { min: 4, max: 8, message: '密码是4到8个字符', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm (formName) {
      // alert(typeof WebSocket)

      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios
            .get('http://127.0.0.1:9000/login', {
              params: {
                userId: this.ruleForm.userId, // 页码
                password: this.ruleForm.checkPass
              }
            })
            .then((response) => {
              if (response.data.code === 200) {
                // 将用户信息缓存到本地浏览器，为什么我发觉并没有缓存上呢？
                // sessionStorage.setItem('user', response.data.data)
                window.sessionStorage.setItem('userId', response.data.data.userId)
                window.sessionStorage.setItem('icon', response.data.data.icon)
                window.sessionStorage.setItem('icon', response.data.data.sessionId)
                // 下面是一个带参数跳转，query代表GET请求方式，可在花括号内填入多个参数
                this.$router.push('/index')
                // this.$router.push({path: '/index', query: {userId: response.data.data.userId}})
                // this.$router.push({
                //   path: '/index',
                //   params: {
                //     user: response.data.data
                //   }
                // })
                // this.$router.push('/index')
              } else {
                this.$message({ message: '您的用户名或密码错误', type: 'error' })
              }
            })
            .catch(function (error) {
              console.log(error)
              // this.$message({ message: '登录失败' + error, type: 'error' })
            })
          // alert("submit!"+this.ruleForm.checkPass);
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style>
.home {
  font-size: 50px;
  color: deeppink;
}
</style>
